﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MobileExamples.Default" %>

<!DOCTYPE html>
<html class="ui-mobile" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="Images/jquery.mobile-1.4.2.min.css" />
</head>
<body class="ui-mobile-viewport ui-overlay-a">
    <form id="form1" runat="server">
        <jqm:MobilePage ID="MobilePage1" runat="server" DesignerWidth="760px" DesignerHeight="500px">
            <jqm:Header ID="Header1" runat="server" Theme="B" Position="Default" Font-Bold="False">
                <Heading Text="页头" HeadingTag="H3" />
                <LeftButton Position="Left" Text="左按钮" Visible="True" />
                <RightButton Position="Right" Text="右按钮" />
            </jqm:Header>
            <jqm:MobilePageContent ID="MobilePageContent1" runat="server">
                <jqm:NavBar ID="NavBar1" runat="server">
                    <Buttons>
                        <jqm:Link runat="server" DataAjax="False" DataDirection="False" DataTransition="None" IsRunatServer="False" />
                        <jqm:Link runat="server" DataAjax="False" DataDirection="False" DataTransition="None" IsRunatServer="False" />
                        <jqm:Link runat="server" DataAjax="False" DataDirection="False" DataTransition="None" IsRunatServer="False" />
                        <jqm:Link runat="server" DataAjax="False" DataDirection="False" DataTransition="None" IsRunatServer="False" />
                        <jqm:Link runat="server" DataAjax="False" DataDirection="False" DataTransition="None" IsRunatServer="False" DataIcon="Home" />
                    </Buttons>
                </jqm:NavBar>
                <jqm:TextInput ID="TextInput1" runat="server" InputType="Text" Value="" />
                <jqm:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="点击获取输入的日期并修改" />
                <jqm:Button ID="Button2" runat="server" OnClick="Button2_Click" />
                <jqm:Link ID="Link1" runat="server" DataIcon="LeftArrow" />
                <jqm:ToggleSwitch ID="ToggleSwitch1" runat="server" Theme="A" Text="开关" />
                <jqm:Slider ID="Slider1" runat="server" Value="20" />
                <jqm:SelectMenu ID="SelectMenu1" runat="server" LabelText="选择菜单" DataIcon="Default" FieldContain="True" Theme="B">
                    <asp:ListItem Selected="True" Value="1">Option1</asp:ListItem>
                    <asp:ListItem>2</asp:ListItem>
                    <asp:ListItem>3</asp:ListItem>
                </jqm:SelectMenu>

                <jqm:RadioButtons ID="RadioButtons1" runat="server" Legend="RadioButtons" FieldContain="True" DataType="Vertical" Theme="B">
                    <jqm:RadioButton Text="选项1" Value="1" Selected="False" />
                    <jqm:RadioButton Text="选项2" Value="2" Selected="True" />
                    <jqm:RadioButton Text="选项3" Value="3" Selected="False" Disabled="True" />
                    <jqm:RadioButton Text="选项4" Value="4" Selected="False" DataEnhanced="True" />
                </jqm:RadioButtons>
                <jqm:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" Text="选择框示例(自动提交)" OnCheckedChanged="CheckBox1_OnCheckedChanged" />
                <jqm:CheckBox ID="CheckBox3" runat="server" Text="选择框示例" DataMini="True" />
                <br />
                <br />
                <br />
                <br />
                <br />
                <jqm:Label ID="Label1" runat="server" Text="===以下未完成===" />
                <jqm:HtmlBlock ID="HtmlBlock1" runat="server" CssClass="flip">
                    <div id="checkboxes1" class="ui-field-contain" data-controltype="checkboxes">
                        <fieldset data-role="controlgroup" data-type="vertical">
                            <legend>选择:</legend>
                            <input id="checkbox1" name="" data-theme="a" type="checkbox" />
                            <label for="checkbox1">Option1</label>
                            <input id="checkbox2" name="" data-theme="b" type="checkbox" />
                            <label for="checkbox2">Option2</label>
                        </fieldset>
                    </div>
                    <fieldset data-role="controlgroup" data-type="horizontal" data-iconpos="right">
                        <legend>Horizontal:</legend>
                        <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" data-theme="b" />
                        <label for="checkbox-h-2a">One</label>
                        <input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b" />
                        <label for="checkbox-h-2b">Two</label>
                        <input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c" data-enhanced="false" />
                        <label for="checkbox-h-2c">Three</label>
                    </fieldset>

                    <div data-role="collapsible-set">
                        <div data-role="collapsible" data-collapsed="false">
                            <h3>Section Header</h3>
                            <div>
                                <a href="Second.aspx" data-transition="fade">Link</a>
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="false">
                            <h3>Section Header</h3>
                        </div>
                        <div data-role="collapsible" data-collapsed="false">
                            <h3>Section Header</h3>
                        </div>
                    </div>
                    <div class="ui-grid-d">
                        <div class="ui-block-a">
                            1
                        </div>
                        <div class="ui-block-b">
                            2
                        </div>
                        <div class="ui-block-c">
                            3
                        </div>
                        <div class="ui-block-d">
                            4
                        </div>
                        <div class="ui-block-e">
                            5
                        </div>
                        <div class="ui-block-a">
                            6
                        </div>
                        <div class="ui-block-b">
                            7
                        </div>
                        <div class="ui-block-c">
                            8
                        </div>
                        <div class="ui-block-d">
                            9
                        </div>
                        <div class="ui-block-e">
                            10
                        </div>
                        <div class="ui-block-a">
                            11
                        </div>
                        <div class="ui-block-b">
                            12
                        </div>
                        <div class="ui-block-c">
                            13
                        </div>
                        <div class="ui-block-d">
                            14
                        </div>
                        <div class="ui-block-e">
                            15
                        </div>
                    </div>
                </jqm:HtmlBlock>

            </jqm:MobilePageContent>
            <jqm:Footer ID="Footer1" runat="server" Position="Fixed" Theme="B">
                <Heading HeadingTag="H2" Text="页脚" />
            </jqm:Footer>
        </jqm:MobilePage>
    </form>
</body>
</html>
